<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;

    }

    li {
      list-style: none;
    }

    body {
      background-color: rgba(197, 197, 197, .8);
    }

    .dev {
      width: 580px;
      height: 153px;
      background-color: rgba(56, 56, 56,.8);
      position: relative;
      margin: 0 auto;
      padding: 32px;
      box-sizing: border-box;
      border-bottom: 1px solid rgb(141, 141, 141);
    }

    .tit {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
    }

    .tit1 {
      font-size: 24px;
      font-weight: bold;
    }

    .time {
      position: absolute;
      right: 30px;
      top: 30px;
      text-align: right;
    }

    .add {
      position: absolute;
      top: 34px;
      right: 30px;
    }

    .first {
      display: block;
    }

    .detail {
      display: none;
    }

    .test{
      margin: 0 auto;
      width: 300px;
      height: 300px;
      background-image: url('https://img.xiaohucloud.com/res/100511/2021/05/10/100511-RVGOzL.png');
      background-position: 50% 50%;
      background-size:100% 100%;
    }
  </style>
</head>

<body>
  <ul class="list">
    <!-- <li class="dev" data-id="1">
      <div class="first">
        <p class="tit">初创阶段</p>
        <img class="add" src="../../img/tianjia.png" alt="">
      </div>
      <div class="detail">
        <p class="tit1">初创阶段</p>
        <p>2007</p>
        <p>成立特普物流公司为客户提供专线，商超配送服务</p>
        <div class="time">
          <p>11月</p>
          <p>November</p>
        </div>
      </div>
    </li> -->
  </ul>

  <div class="test">

  </div>


  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
    $(function () {
      let arr = [
        { id: 1, tit: '初创阶段', time: 2007, mes: '成立特普物流公司为客户提供专线，商超配送服务。', cnmonth: '11月', enmonth: 'November',imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/10/100511-RVGOzL.png'},
        { id: 2, tit: '向上生长', time: 2008, mes: '公司在北京开始承接家乐福外仓业务。', cnmonth: '05月', enmonth: 'May',imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/13/100511-mTuPbR.png' },
        { id: 3, tit: '转型升级', time: 2014, mes: '公司转型正式成立阿里通云仓。', cnmonth: '08月', enmonth: 'August',imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/13/100511-qLSXiV.png' },
        { id: 4, tit: '专注与拓展', time: 2017, mes: '引进拉芳，阿道夫等项目，定位专注于快销品，化妆品洗护，彩妆类；开设华东RDC，义务分仓成立；双十一完成订单116万单。', cnmonth: '01-11月', enmonth: 'January to November',imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/13/100511-MzmGsS.png' },
        { id: 5, tit: '迅速发展', time: 2018, mes: '先后开设华中RDC武汉仓，华南RDC花都仓，华东RDC淮安仓实现4仓一体。', cnmonth: '04-06月', enmonth: 'April to June', imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/13/100511-CEHtXS.png'},
        { id: 6, tit: '稳定增长', time: 2020, mes: '杭州RDC筹建投入运营', cnmonth: '07月', enmonth: 'July', imgUrl:'https://img.xiaohucloud.com/res/100511/2021/05/13/100511-ECiUxX.png' }
      ]


      for (let i = 0; i < arr.length; i++) {
        let li = `
      <li class="dev" data-id="${arr[i].id}">
      <div class="first">
        <p class="tit">${arr[i].tit}</p>
        <img class="add" src="../../img/tianjia.png" alt="">
      </div>
      <div class="detail">
        <p class="tit1">${arr[i].tit}</p>
        <p>${arr[i].time}</p>
        <p>${arr[i].mes}</p>
        <div class="time">
          <p>${arr[i].cnmonth}</p>
          <p>${arr[i].enmonth}</p>
        </div>
      </div>
    </li>`

        $('.list').append(li)

      }

      // 隐藏原内容
      function clear(select) {
        let $select = select
        $select.siblings().css({
          'background-color': '#a0a3a5'
        });
        $select.siblings().find('.first').css({
          'display': 'block'
        })
        $select.siblings().find('.detail').css({
          'display': 'none'
        })
      }


      $('.list').on('click', "li", function (e) {
        // console.log(e.target);
        console.log($(this).attr('data-id'));

        let i=$(this).attr('data-id')
        console.log(arr[i-1].imgUrl);
        $('.test').css('background-image', 'url(' + arr[i-1].imgUrl + ')')

        clear($(this))
        $(this).css({
          'background-color': '#fff'
        })

        $(this).find('.first').css({
          'display': 'none'
        })

        $(this).find('.detail').css({
          'display': 'block'
        })

      })

    })


  </script>
</body>


</html>